<template>
	<view class="cart-shop">
		<!-- 分类列表 -->
		<view class="side-a">
			<scroll-view :scroll-y="true" style="height: 100%" :scroll-top="scrollTop" :scroll-with-animation="true">
				<view class="item text-ellipsis__2 side-item" v-for="(item,index) in shopdata.categories" :key="index"
					@click="handleSideAction(index)" :class="[index===sideCurrentIndex&&'type_active']">
					{{ i18nLocale=='ug'?item.ug_name:item.cn_name }}
				</view>
			</scroll-view>
		</view>
		<!-- 渲染产品列表 -->
		<view class="side-b">
			<!-- 搜索 -->
			<view class="search">
				<view class="search-content" :dir="i18nLocale=='ug'?'rtl':''">
					<u-icon name="search" color="#999" size="24"></u-icon>
					<view class="input">
						<input type="text" @blur="changeblur" @focus="changefocus" @input="searchinput"
							:placeholder="$t('SearchPlaceholder')" v-model="keyword" placeholder-style="font-size:24rpx"
							:clearabled="false" />
					</view>
				</view>
			</view>
			<scroll-view id="side_b" scroll-y class="side-scroll" scroll-with-animation :scroll-into-view="intoView"
				@scroll="contentScroll" :dir="i18nLocale=='ug'?'rtl':''" v-if="totalshop">
				<view :id="`v_${index}`" v-for="(item,index) in totalshop.categories" class="item_b" :key="item.id">
					<!-- 显示所有 -->
					<view class="item" v-for="(sub_item,sub_index) in item.products" :key="sub_item.id" v-if="!keyword" >
						<view v-if="!sub_item.status" class="false-status">{{$t('SoldOut')}}</view>
						<view class="img-box">
							<image :src="getImgSrc(sub_item.cover)" class="img"></image>
						</view>
						<view class="goods-info">
							<view class="title">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
							<view class="num">{{$t('Sold')}} : {{ sub_item.sold }}</view>
							<view class="price">
								<view>
									<text class="item-price">￥{{ sub_item.price }}</text>
								</view>
							</view>
						</view>
						<!-- 加减组件 -->
						<NumberCalculation v-if="!tablenum" :qty="sub_item.qty" :item="sub_item" :index="index"
							:shopid="shopdata.id">
						</NumberCalculation>
					</view>
					
					<!-- 搜索 -->
					<view class="item" v-for="(sub_item,sub_index) in item.products" :key="sub_item.id" v-if="keyword?i18nLocale=='ug'?sub_item.ug_name.includes(keyword):sub_item.cn_name.includes(keyword):false" >
						<view v-if="!sub_item.status" class="false-status">{{$t('SoldOut')}}</view>
						<view class="img-box">
							<image :src="getImgSrc(sub_item.cover)" class="img"></image>
						</view>
						<view class="goods-info">
							<view class="title">{{ i18nLocale=='ug'?sub_item.ug_name:sub_item.cn_name }}</view>
							<view class="num">{{$t('Sold')}} : {{ sub_item.sold }}</view>
							<view class="price">
								<view>
									<text class="item-price">￥{{ sub_item.price }}</text>
								</view>
							</view>
						</view>
						<!-- 加减组件 -->
						<NumberCalculation v-if="!tablenum" :qty="sub_item.qty" :item="sub_item" :index="index"
							:shopid="shopdata.id">
						</NumberCalculation>
					</view>
					
				</view>
				<view class="" style="height:850rpx;width:100%;"></view>
			</scroll-view>
		</view>
		<ShopBar title="GoCheckout" bottom="0" :type="type"></ShopBar>
	</view>
</template>

<script>
	import ShopBar from "./ShopBar.vue"
	import NumberCalculation from "./NumberCalculation.vue"
	export default {
		components: {
			ShopBar,
			NumberCalculation
		},
		//产品分类
		props: ['shopdata', 'shop_id', 'type', 'tablenum'],
		data() {
			return {
				intoView: 'v_0',
				sideCurrentIndex: 0,
				scrollTop: 0,
				contentHeightArr: [],
				keyword: '',
				search_id: '',
				searcharry: []
			}
		},
		computed: {
			totalshop() {
				return this.$store.state.shop.totalshop
			},
			keyboardflag() {
				return this.$store.state.keyboard;
			},
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		mounted() {
			setTimeout(() => {
				this.getHeight('.item_b').then(res => {
					// res
					res.forEach((item, index) => {
						let top = index > 0 ? this.contentHeightArr[index - 1] : 0;
						top += item.height;
						this.contentHeightArr.push(top);
					})
				})
			}, 1000)
		},
		methods: {
			async getHeight(element) {
				return new Promise((resolve) => {
					let view = uni.createSelectorQuery().in(this).selectAll(element);
					view.boundingClientRect(data => {
						if (!data) {
							setTimeout(() => {
								this.getHeight()
							}, 10)
							return
						}
						resolve(data)
					}).exec();
				})
			},

			contentScroll(event) {
				let scrollTop = event.target.scrollTop
				let index = this.contentHeightArr.findIndex((item) => {
					return scrollTop <= item
				})
				this.sideCurrentIndex = index == -1 ? this.sideCurrentIndex : index
				this.scrollHeight()
			},
			handleSideAction(index) {
				this.sideCurrentIndex = index
				this.intoView = `v_${index}`
				this.scrollHeight()
			},
			async getWrapSideHeight() {
				return new Promise(resolve => {
					let view = uni.createSelectorQuery().in(this).select(".side-a");
					view.boundingClientRect(data => {
						resolve(data)
					}).exec();
				})
			},
			async scrollTopTo(OffsetHeight, itemTab) {
				let tabNav = await this.getWrapSideHeight()

				this.scrollTop = OffsetHeight - (tabNav.height - itemTab.height) / 2
			},
			async scrollHeight() {
				let tabs = await this.getHeight(".side-item")
				let itemTab = tabs[this.sideCurrentIndex]
				if (!itemTab) return

				let currentBeforeArr = tabs
					.slice(0, this.sideCurrentIndex)

				let OffsetHeight = currentBeforeArr
					.reduce((total, curr) => {
						return total + curr.height
					}, 0);

				this.scrollTopTo(OffsetHeight, itemTab)
			},
			//点击搜搜框
			changeblur() {
				this.$store.commit('setKeyboard', false);
			},
			//搜搜框输入
			changefocus() {
				this.$store.commit('setKeyboard', true);
			},
			// 搜索
			searchinput(e) {
				let value = e.detail.value;
				let that = this;
				let id = this.shop_id;
				let shopdata = this.$store.state.shop.totalshop;
				for (let i = 0; i < shopdata.categories.length; i++) {
					for (let j = 0; j < shopdata.categories[i].products.length; j++) {
						if (shopdata.categories[i].products[j].ug_name.includes(value) ||
							shopdata.categories[i].products[j].cn_name.includes(value)) {
							this.search_id = shopdata.categories[i].products[j].id;
						}

					}
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.cart-shop {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		overflow: hidden;

	}

	.side-scroll {
		width: 100%;
		height: 100%;
		position: relative;


	}

	.side_b_title {
		position: sticky;
		top: -2rpx;
		left: 0;
		z-index: 99;
		padding: 10rpx 24rpx;


	}

	.side-a {
		width: 25%;
		box-sizing: border-box;
		height: 100%;
		overflow: auto;
		background-color: $uni-bg-color-box;
		// box-shadow: $uni-bg-shadow;

		.item {
			text-align: center;
			padding: 30rpx 10rpx;
			display: flex;
			font-size: $uni-font-size-base;
			justify-content: center;
			align-items: center;
			color: $uni-color-title;
			font-weight: 600;
		}

		.type_active {
			background-color: #eeedf2;
			font-weight: 600;
			color: $uni-color-topic;
		}
	}

	.side-b {
		width: 75%;
		height: 100%;
		box-sizing: border-box;
		padding: 0rpx $uni-spacing-padding-sm;
		background-color: $uni-bg-color-input;


		.goods {
			font-size: 26rpx;
		}

		.country {
			font-size: 22rpx;
			color: #999999;

		}

		.item {
			padding: 15rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color-box;
			border-radius: $uni-border-radius-base;
			box-shadow: $uni-bg-shadow;
			box-sizing: border-box;
			position: relative;
			transition: all 0.6s; 

			.false-status {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				left: 0%;
				top: 0%;
				border-radius: $uni-border-radius-base;
				z-index: 99;
				color: #fff;
				font-size: $uni-font-size-base;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
			}

			.img-box {
				width: 150rpx;
				height: 150rpx;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0rpx 20rpx;

				view {
					padding: 7rpx 0rpx;
				}

				.title {
					font-size: 26rpx;
					font-weight: bold;
				}
			}

			.num {
				color: #999999;
				font-size: 28rpx;
			}

			.description {
				font-size: 22rpx;
				color: #666666;
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				white-space: nowrap;

				.item-price {
					font-size: 28rpx;
					padding-right: 10rpx;
				}

				.unit {
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
		.item:hover{
			transform: scale(1.47,1.45);
			transform-origin: center right;
			margin:70rpx 0rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.search {
		width: 100%;
		box-sizing: border-box;
		padding: $uni-spacing-margin-sm;

		.search-content {
			width: 100%;
			background-color: #fff;
			border-radius: $uni-border-radius-lg;
			color: $uni-color-title;
			display: flex;
			align-items: center;
			font-size: $uni-font-size-sm1;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			input {
				font-size: $uni-font-size-sm1;
			}
		}
	}
</style>